<template>
    <el-card class="mainCard">
        <template #header>
            <div class="header">
                我的资料
                <el-button type="primary" @click="updateDialog.look()">修改资料</el-button>
            </div>
        </template>
        <el-form label-width="100px">
            <el-form-item label="姓名">
                {{ mediator.name }}
            </el-form-item>
            <el-form-item label="性别">{{ mediator.gender == 0 ? "女" : "男" }}</el-form-item>
            <el-form-item label="手机号">{{ mediator.phone }}</el-form-item>
            <el-form-item label="擅长领域">{{ mediator.field }}</el-form-item>
            <el-form-item label="工作单位">{{ mediator.workOrg }}</el-form-item>
            <el-form-item label="积分">{{ mediator.points }}</el-form-item>
            <el-form-item label="身份证号">{{ mediator.idNum }}</el-form-item>
            <el-form-item label="学历">{{ mediator.education }}</el-form-item>
            <el-form-item label="出生年月">{{ mediator.birthDate }}</el-form-item>
        </el-form>
    </el-card>
    <el-dialog title="修改个人资料" v-model="updateDialog.visible">
        <el-form label-width="100px">
            <el-form-item label="姓名">
                <el-input v-model="updateDialog.mediator.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="updateDialog.mediator.gender" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input disabled v-model="updateDialog.mediator.phone"></el-input>
            </el-form-item>
            <el-form-item label="擅长领域">
                <el-input v-model="updateDialog.mediator.field"></el-input>
            </el-form-item>
            <el-form-item label="工作单位">
                <el-input v-model="updateDialog.mediator.workOrg"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="updateDialog.mediator.idNum"></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-select v-model="updateDialog.mediator.education">
                    <el-option :label="'博士'" :value="'博士'"></el-option>
                    <el-option :label="'研究生'" :value="'研究生'"></el-option>
                    <el-option :label="'大学'" :value="'大学'"></el-option>
                    <el-option :label="'高中'" :value="'高中'"></el-option>
                    <el-option :label="'初中'" :value="'初中'"></el-option>
                    <el-option :label="'大专'" :value="'大专'"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生年月">
                <el-date-picker v-model="updateDialog.mediator.birthDate" type="month" placeholder="选择日期"
                    value-format="YYYY年MM月" format="YYYY年MM月" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" type="primary" @click="updateDialog.update()">确定修改</el-button>
                <el-button size="large" @click="updateDialog.hidden()">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { getMediatorById, updateMediator } from '@/axios/mediator/mediatorReq';
import useUserStore from '@/stores/userStore';
import Mediator from '@/types/response/mediator';
import Notice from '@/utils/notice';
import { TimeUtil } from '@/utils/timeUtil';
import TypeUtil from '@/utils/typeUtil';
import { reactive, Ref, ref } from 'vue';
let userStore = useUserStore();
let mediator: Ref<Mediator> = ref(new Mediator());
//初始化用户数据
getMediatorById(userStore.userId).then(m => {
    mediator.value = m;
    console.log(mediator);
})
let updateDialog = reactive({
    visible: false,
    mediator: reactive(new Mediator()),
    look() {
        updateDialog.visible = true;

        TypeUtil.copy(updateDialog.mediator, mediator.value);//将属性进行拷贝
    },
    update() {
        console.log(updateDialog.mediator.birthDate);
        updateMediator(updateDialog.mediator).then(res => {

            if (res) {//如果修改成功那么进行信息修改
                TypeUtil.copy(mediator.value, updateDialog.mediator);
                Notice.success("修改成功")
            }
        })
    },
    hidden() {
        updateDialog.visible = false;
    }

})
</script>
<style lang="scss">
.mainCard {
    min-height: 80%;

    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0px 10px;
    }
}
</style>